<template>
 <div class='zSearch'>
    <div class="zSearchBox" :class="showinput?'smallSearch':'bigsearch'">
      <i class="zSearchIcon icon-search" @click="showfocus"><svg t="1712545037861" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4326" width="20" height="20"><path d="M725.09 679.077l156.915 156.915c16.662 16.662 16.662 43.677 0 60.34-16.663 16.662-43.678 16.662-60.34 0l-160.37-160.37c-39.083 26.866-84.256 45.858-133.421 54.527-184.82 32.589-361.066-90.82-393.655-275.64s90.82-361.065 275.64-393.654c156.038-27.514 309.317 56.45 371.116 200.095 9.313 21.646-0.685 46.742-22.331 56.055-21.646 9.313-46.743-0.685-56.056-22.331-46.243-107.487-161.065-170.385-277.911-149.782-138.408 24.405-230.826 156.391-206.42 294.8 24.404 138.407 156.39 230.825 294.799 206.42 112.819-19.893 197.598-112.397 209.036-224.656 2.389-23.443 23.33-40.51 46.772-38.122 23.443 2.388 40.51 23.329 38.122 46.771-7.277 71.421-36.75 136.833-81.896 188.632z" p-id="4327" fill="#8a8a8a"></path></svg></i>
      <input type="text" class="zSearchInput" ref="zSearchInput" :placeholder="placeholder" v-model="searchContent" @input="search" @blur="blurInput"/>
      <i class="zSearchIcon icon-close" v-show="searchContent.length>0" @click="close"><svg t="1712545408114" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11348" width="18" height="18"><path d="M307.2 307.2c-12.8 12.8-12.8 44.8 0 57.6L460.8 512l-147.2 147.2c-12.8 12.8-12.8 38.4 0 51.2 12.8 12.8 38.4 12.8 51.2 0L512 563.2l147.2 147.2c12.8 12.8 38.4 12.8 51.2 0 12.8-12.8 12.8-38.4 0-51.2L563.2 512l147.2-147.2c12.8-12.8 12.8-38.4 0-51.2-12.8-12.8-38.4-12.8-51.2 0L512 460.8 364.8 307.2c-12.8-12.8-44.8-12.8-57.6 0z" p-id="11349" fill="#8a8a8a"></path><path d="M512 1024c-281.6 0-512-230.4-512-512s230.4-512 512-512c108.8 0 211.2 32 300.8 96 12.8 12.8 19.2 32 6.4 44.8s-32 19.2-44.8 6.4C697.6 89.6 608 64 512 64 262.4 64 64 262.4 64 512s198.4 448 448 448 448-198.4 448-448c0-76.8-19.2-153.6-57.6-224-6.4-12.8-6.4-32 12.8-44.8 12.8-6.4 32-6.4 44.8 12.8 38.4 76.8 64 166.4 64 256 0 281.6-230.4 512-512 512z" p-id="11350" fill="#8a8a8a"></path></svg></i>
    </div>

    <div class="menuSearchList" v-if="!showinput">
			<div class="maxHeight" >
        <ul v-if="menuList.length>0">
          <!-- @click="$router.push(menu.url)" -->
          <li v-for="menu in menuList" v-if="menu.name"  v-html="searchNamefilter(menu.name)"></li>
        </ul>
        <p v-if="menuList.length===0" class="nodata">无数据</p>
      </div>
		</div>
    
 </div>
</template>

<script>
export default {
  name: 'zSearch',
  props:{
    placeholder:{
      type: String,
      default: '请输入'
    },
    list:{
      type: Array,
      default: ()=>{}
    }
  },
  data(){
    return{
      searchContent: '',
      menuList: [],
      showinput: true,
    }
  },
  methods:{
    // 高亮显示
    searchNamefilter(name){
      if(!name)return
      let key = this.searchContent;
      const reg = new RegExp(key, 'ig');
      return name.replace(reg, `<span style="color:red">${key}</span>`)
    },
    // 搜索
    search(){
      if(this.searchContent!==''){
        console.log(this.list)
        // 关键词匹配
        this.menuList = this.list.filter(menu=>menu.name.includes(this.searchContent));
        console.log(this.menuList)
      }else{
        this.menuList = []
      }

    },
    // 点击获取焦点
    showfocus(){
      this.showinput = false;
      setTimeout(()=>{
        this.$refs['zSearchInput'].focus();
      },100)
    },
    // blurInput离焦事件
    blurInput(){
      if(this.searchContent===''){
        this.showinput = true
      }
    },
    // 关闭搜索
    close(){
      this.searchContent = '';
      this.$refs['zSearchInput'].focus();
      this.menuList = [];
      setTimeout(()=>{
        this.$refs['zSearchInput'].blur();
      },100)
    },
    
  }
  
}
</script>

<style scoped>
.zSearch{
  position: relative;
  width: 220px;
  height: 36px;
}
.zSearchBox{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 220px;
  height: 30px;
  transition: all 0.5s;
}
.smallSearch{
  border: none;
}
.smallSearch .zSearchInput{
  display: none;
}
.smallSearch .icon-search svg{
  font-size: 26px;
  width: 26px;
  height: 26px;
}
.zSearchInput{
  width: 160px;
  margin-right: 25px;
  border: none;
  line-height: 26px;
  outline: none;
  transition: all 0.5s;
}
.zSearchIcon{
  margin-top: 3px;
  transition: all 0.5s;
  cursor: pointer;
  &:hover{
    opacity: 0.6;
  }
}
.icon-close{
  position: absolute;
  right: 5px;
}

.menuSearchList{
	position: absolute;
	z-index: 2;
	top: 40px;
	left: 0;
	background: #fff;
	padding: 12px;
	width: 220px;
	box-sizing: border-box;
	min-height: 30px;
	border: 1px solid #EBEEF5;
	border-radius: 4px;
	-webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
		color: #333;
		text-align: left;
		font-size: 12px;

	&:before{
		content:'';
		position: absolute;
		left: 12px;
		top: -6px;
		z-index: 3;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
		border-width: 6px;
		margin-right: 3px;
    border-top-width: 0;
    border-bottom-color: #fff;
    -webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03))
	}	
}
.menuSearchList ul,.menuSearchList li{
  list-style: none;
  text-indent: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
.maxHeight{
  max-height: 400px;
  overflow-y: auto;
}
li{
  line-height: 26px;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  cursor: pointer;
  &:hover{
    background: #1676ff;
    color: #fff;
  }
}
</style>
